<div>
<form class="form-horizontal" role="form" name="tradeForm" novalitedate>
  <div class="form-ctrl md-whiteframe-z1">
    <div class="form-search" style="height:260px;" ng-class="{true: 'shou'}[flag.formIsFold]" ng-switch="tradePercentage.timeType.timeTypeCode">
      <div>
        <label style="">业务线</label>
        <md-select ng-model="tradePercentage.businessLine">
          <md-select-label>{{tradePercentage.businessLine ? _getNames(tradePercentage.businessLine,'businessLineName',selector.businessLine) : "全部"}}</md-select-label>
          <md-option ng-value="" ng-click="tradePercentage.businessLine = undefined">全部</md-option>
          <md-option ng-value="business"  ng-repeat="business in selector.businessLine">{{business.businessLineName}}</md-option>
        </md-select>
      </div>
      <!-- <div>
        <label style="">单位</label>
        <md-select ng-model="tradePercentage.unit">
          <md-select-label>{{tradePercentage.unit ? _getNames(tradePercentage.unit,'name',selector.unit) : "个"}}</md-select-label>
          <md-option ng-value="unit" ng-repeat="unit in selector.unit" >{{unit.name}}</md-option>
        </md-select>
      </div> -->
      <div id="provinceCom">
        <label style="">省公司</label>
        <md-select multiple ng-model="tradePercentage.provinceCodes" ng-if="flag.provincial">
          <md-select-label>{{tradePercentage.provinceCodes.length ? _getNames(tradePercentage.provinceCodes,'provinceName', selector.provinceCodes) : "全部"}}</md-select-label>
          <md-option ng-value="" ng-click="_checkAll(tradePercentage,'provinceCodes')">全部</md-option>
          <md-option ng-value="province" ng-repeat="province in selector.provinceCodes">{{province.provinceName}}</md-option>
        </md-select>
        <md-select disabled multiple ng-model="tradePercentage.provinceCodes" ng-if="!flag.provincial">
          <md-select-label>全部</md-select-label>
        </md-select>
      </div>
      <div>
        <md-switch ng-change="changeProvincial()" ng-model="flag.provincial" >
          分省
        </md-switch>
      </div>
      <div></div>
      <div></div>
      <div>
        <label style="">账期</label>
        <md-select ng-model="tradePercentage.timeType">
          <md-select-label>{{tradePercentage.timeType ? _getNames(tradePercentage.timeType,'timeTypeName',selector.timeType) : "日"}}</md-select-label>
          <md-option ng-value="timeType" ng-repeat="timeType in selector.timeType" >{{timeType.timeTypeName}}</md-option>
        </md-select>
      </div>
      <input-quarter-group start-time="tradePercentage.quarter.startTime" end-time="tradePercentage.quarter.endTime" ng-switch-when="4"></input-quarter-group>
      <div ng-if="!tradePercentage.timeType || tradePercentage.timeType.timeTypeCode !== '4'">
        <md-input-container flex>
          <label >开始时间</label>
          <input name="dateStartTime" type="date" end-time="date.endTime" time-validate="day" ng-model="date.startTime"  ng-switch-default required>
          <div ng-messages="tradeForm.dateStartTime.$error">
            <div ng-message="date">请正确输入时间</div>
            <div ng-message="time-error">开始时间不应大于结束时间</div>
          </div>
          <input name="monthStartTime" ng-model="date.startTime"  end-time="date.endTime" time-validate="month"  type="month" ng-switch-when="3" required>
          <div ng-messages="tradeForm.monthStartTime.$error">
            <div ng-message="date">请正确输入时间</div>
            <div ng-message="time-error">开始时间不应大于结束时间</div>
          </div>
          <input ng-model="date.startTime"  end-time="date.endTime" type="number" time-validate="year"  ng-switch-when="5" name="startQuarter" required>
          <div ng-messages="tradeForm.startQuarter.$error">
            <div ng-message="date">请正确输入时间</div>
            <div ng-message="time-error">开始时间不应大于结束时间</div>
          </div>
        </md-input-container >
      </div>
      <div ng-if="!tradePercentage.timeType || tradePercentage.timeType.timeTypeCode !== '4'">
        <md-input-container flex>
          <label>结束时间</label>
          <input name="dateEndTime" type="date" ng-model="date.endTime"  start-time="date.startTime" time-validate="day" ng-switch-default required>
          <div ng-messages="tradeForm.dateEndTime.$error">
            <div ng-message="date">请正确输入时间</div>
            <div ng-message="time-error">结束时间不应小于开始时间</div>
            <div ng-message="too-great">结束时间不应大于当前时间</div>
          </div>
          <input name="monthEndTime" ng-model="date.endTime"  type="month" start-time="date.startTime" time-validate="month" ng-switch-when="3" required>
          <div ng-messages="tradeForm.monthEndTime.$error">
            <div ng-message="date">请正确输入时间</div>
            <div ng-message="time-error">结束时间不应小于开始时间</div>
            <div ng-message="too-great">结束时间不应大于当前时间</div>
          </div>
          <input ng-model="date.endTime"  start-time="date.startTime" type="number" time-validate="year" ng-switch-when="5" name="endQuarter" required>
          <div ng-messages="tradeForm.endQuarter.$error">
            <div ng-message="date">请正确输入时间</div>
            <div ng-message="time-error">结束时间不应小于开始时间</div>
            <div ng-message="too-great">结束时间不应大于当前时间</div>
          </div>
        </md-input-container >
      </div>
    </div>
    <i class="glyphicon glyphicon-chevron-up shrinkage" ng-click="flag.formIsFold=true" ng-show="flag.isQuery && !(tradeForm.$invalid||quarterInvalid)"></i>
    <md-button ng-click="tradePercentageQuery()" ng-disabled="tradeForm.$invalid||quarterInvalid" class="md-fab md-primary md-hue-1" aria-label="Profile">
      <i class="glyphicon glyphicon-search"  ng-show="!flag.formIsFold"></i>
      <i class="glyphicon glyphicon-arrow-down" style="margin-top:28px;" ng-show="flag.formIsFold"></i>
    </md-button>
  </div>
</form>
<div class="table-info" ng-controller="TradePercentageViewCtrl">
  <div >
  <div class="menus" ng-show="flag.isQuery">
    <md-button aria-label="列表" class="md-raised ico-btn" ng-click="flag.showTable=true">
      <img src="images/tables.png">
    </md-button>
    <md-button aria-label="图表" class="md-raised ico-btn" ng-click="flag.showTable=false">
      <img src="images/charts.png">
    </md-button>
    <form action="{{flag.exportUrl}}" method="post">
      <input type="hidden" ng-value="viewObj.exportParam" name="exportParam"/>
      <md-button aria-label="导出Excel" type="commit" class  ="md-raised">导出Excel</md-button>
    </form>
    <span class="division" ng-show="!flag.showTable"></span>
    <md-button class="md-raised" ng-show="!flag.showTable" style="background-color: #FF9800;color:white" ng-click="businessAmount()">业务量</md-button>
    <md-button class="md-raised" ng-show="!flag.showTable" style="background-color: #FF9800;color:white" ng-click="orderMoney()">订单金额</md-button>
    <md-button class="md-raised" ng-show="!flag.showTable" style="background-color: #FF9800;color:white" ng-click="rechargeMoney()">充值金额</md-button>
  </div>
  <div ng-show="flag.showTable === false">
    <div id="businessAmount" style="height:500px;" ng-show="viewObj.queryType === 1">
    </div>
    <div id="orderMoney" style="height:500px;"  ng-show="viewObj.queryType === 2">
    </div>
    <div id="rechargeMoney" style="height:500px;"  ng-show="viewObj.queryType === 3">
    </div>
    </div>
  </div>
  <div class="table-detail" ng-show="flag.showTable === true">
    <div class="t_r">
      <table class="table table-bordered">
        <caption style="text-align:center;font-size:large;font-weight:bold;color:black">{{viewObj.title}}</caption>
        <thead>
          <tr>
            <th width="20%">账期</th>
            <th width="8%" ng-if="viewObj.provincial">省代码</th>
            <th width="8%" ng-if="viewObj.provincial">省公司</th>
            <th width="8%" ng-if="!viewObj.provincial">业务线</th>
            <th>业务量(笔)</th>
            <th>业务量占比</th>
            <th>订单金额(元)</th>
            <th>订单金额占比</th>
            <th>充值金额(元)</th>
            <th>充值金额占比</th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="item in viewObj.series">
            <td>{{viewObj.duration}}</td>
            <td ng-if="viewObj.provincial">{{item.provinceCode}}</td>
            <td ng-if="viewObj.provincial">{{item.provinceName}}</td>
            <td ng-if="!viewObj.provincial">{{item.businessLineName}}</td>
            <td>{{item.businessAmount}}</td>
            <td>{{item.percentage.businessAmount.toFixed(4)+'%'}}</td>
            <td>{{item.orderMoney.toFixed(2)}}</td>
            <td>{{item.percentage.orderMoney.toFixed(4)+'%'}}</td>
            <td>{{item.rechargeMoney.toFixed(2)}}</td>
            <td>{{item.percentage.rechargeMoney.toFixed(4)+'%'}}</td>
            <!-- <td><a href="javascript:;" ng-click="getMoreDetail(item.provinceCode)">详细情况</a></td> -->
          </tr>
          <tr class="summary" >
            <td>{{viewObj.total.name}}</td>
            <td ng-if="viewObj.provincial"></td>
            <td></td>
            <td>{{viewObj.total.businessAmount}}</td>
            <td></td>
            <td>{{viewObj.total.orderMoney.toFixed(2)}}</td>
            <td></td>
            <td>{{viewObj.total.rechargeMoney.toFixed(2)}}</td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
</div>